<div class="resp-tabs-container" id="resume">
    <h2 class="resp-accordion hi-icon-wrap hi-icon-effect-5 hi-icon-effect-5a" role="tab" aria-controls="tab_item-0" ui-sref="main.profile">
        <i class="hi-icon fa fa-user icon_menu icon_menu_active"></i>
        <span class="tite-list-resp">profile</span>
        <i class="glyphicon glyphicon-chevron-down arrow-tabs"></i>
    </h2>
    <h2 class="resp-accordion hi-icon-wrap hi-icon-effect-5 hi-icon-effect-5a resp-tab-active" role="tab" aria-controls="tab_item-0">
        <i class="hi-icon fa fa-user icon_menu icon_menu_active"></i>
        <span class="tite-list-resp">resume</span>
        <i class="glyphicon glyphicon-chevron-up arrow-tabs"></i>
    </h2>
    <div class="main_content">
        <div class="content">
            <h1>Resume - Personal Info</h1>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="title_content">
                    <div class="text_content">DESIGNS SKILLs</div>
                    <div class="clear"></div>
                </div>
                <div class="skill">
                    <div class="skillBar clearfix" data-percent="95%">
                        <div class="skillBar-title">
                            <span>Photoshop</span>
                        </div>
                        <div class="skillBar-bar" style="width:95%"></div>
                        <div class="skill-bar-percent">95%</div>
                    </div>
                </div>
                <div class="skill">
                    <div class="skillBar clearfix" data-percent="90%">
                        <div class="skillBar-title">
                            <span>Illustrateur</span>
                        </div>
                        <div class="skillBar-bar" style="width:90%"></div>
                        <div class="skill-bar-percent">90%</div>
                    </div>
                </div>
                <div class="skill">
                    <div class="skillBar clearfix" data-percent="65%">
                        <div class="skillBar-title">
                            <span>Indesign</span>
                        </div>
                        <div class="skillBar-bar" style="width:65%"></div>
                        <div class="skill-bar-percent">65%</div>
                    </div>
                </div>
                <div class="skill">
                    <div class="skillBar clearfix" data-percent="35%">
                        <div class="skillBar-title">
                            <span>Flash</span>
                        </div>
                        <div class="skillBar-bar" style="width:35%"></div>
                        <div class="skill-bar-percent">35%</div>
                    </div>
                </div>

                <!--第二个模块-->
                <div class="title_content">
                    <div class="text_content">PROGRAMMING SKILLS</div>
                    <div class="clear"></div>
                </div>
                <div class="skill">
                    <div class="skillBar clearfix" data-percent="85%">
                        <div class="skillBar-title">
                            <span>Wordpress</span>
                        </div>
                        <div class="skillBar-bar" style="width:85%"></div>
                        <div class="skill-bar-percent">85%</div>
                    </div>
                </div>
                <div class="skill">
                    <div class="skillBar clearfix" data-percent="75%">
                        <div class="skillBar-title">
                            <span>Joomla</span>
                        </div>
                        <div class="skillBar-bar" style="width:75%"></div>
                        <div class="skill-bar-percent">75%</div>
                    </div>
                </div>
                <div class="skill">
                    <div class="skillBar clearfix" data-percent="85%">
                        <div class="skillBar-title">
                            <span>Drupal</span>
                        </div>
                        <div class="skillBar-bar" style="width:60%"></div>
                        <div class="skill-bar-percent">60%</div>
                    </div>
                </div>
                <div class="skill">
                    <div class="skillBar clearfix" data-percent="89%">
                        <div class="skillBar-title">
                            <span>Php</span>
                        </div>
                        <div class="skillBar-bar" style="width:89%"></div>
                        <div class="skill-bar-percent">89%</div>
                    </div>
                </div>

                <!--第三个模块-->
                <div class="title_content">
                    <div class="text_content">OFFICE SKILLS</div>
                    <div class="clear"></div>
                </div>
                <div class="skill">
                    <div class="skillBar clearfix" data-percent="85%">
                        <div class="skillBar-title">
                            <span>MS Excel</span>
                        </div>
                        <div class="skillBar-bar" style="width:85%"></div>
                        <div class="skill-bar-percent">85%</div>
                    </div>
                </div>
                <div class="skill">
                    <div class="skillBar clearfix" data-percent="95%">
                        <div class="skillBar-title">
                            <span>MS Word</span>
                        </div>
                        <div class="skillBar-bar" style="width:95%"></div>
                        <div class="skill-bar-percent">95%</div>
                    </div>
                </div>
                <div class="skill">
                    <div class="skillBar clearfix" data-percent="60%">
                        <div class="skillBar-title">
                            <span>Powerpoint</span>
                        </div>
                        <div class="skillBar-bar" style="width:60%"></div>
                        <div class="skill-bar-percent">60%</div>
                    </div>
                </div>
                <div class="skill">
                    <div class="skillBar clearfix" data-percent="40%">
                        <div class="skillBar-title">
                            <span>SharePoint</span>
                        </div>
                        <div class="skillBar-bar" style="width:40%"></div>
                        <div class="skill-bar-percent">40%</div>
                    </div>
                </div>


                <!--第四个模块-->
                <div class="title_content">
                    <div class="text_content">HOBBIES SKILLS</div>
                    <div class="clear"></div>
                </div>
                <div class="skill">
                    <div class="skillBar clearfix" data-percent="60%">
                        <div class="skillBar-title">
                            <span>Music</span>
                        </div>
                        <div class="skillBar-bar" style="width:60%"></div>
                        <div class="skill-bar-percent">60%</div>
                    </div>
                </div>
                <div class="skill">
                    <div class="skillBar clearfix" data-percent="95%">
                        <div class="skillBar-title">
                            <span>Sport</span>
                        </div>
                        <div class="skillBar-bar" style="width:95%"></div>
                        <div class="skill-bar-percent">95%</div>
                    </div>
                </div>
                <div class="skill">
                    <div class="skillBar clearfix" data-percent="85%">
                        <div class="skillBar-title">
                            <span>Reading</span>
                        </div>
                        <div class="skillBar-bar" style="width:85%"></div>
                        <div class="skill-bar-percent">85%</div>
                    </div>
                </div>

                <div class="skill">
                    <div class="skillBar clearfix" data-percent="70%">
                        <div class="skillBar-title">
                            <span>Travelling</span>
                        </div>
                        <div class="skillBar-bar" style="width:70%"></div>
                        <div class="skill-bar-percent">70%</div>
                    </div>
                </div>

                <!--第五个模块-->
                <div class="title_content">
                    <div class="text_content">LANGUAGE SKILLS</div>
                    <div class="clear"></div>
                </div>
                <div class="skill">
                    <div class="skillBar clearfix" data-percent="90%">
                        <div class="skillBar-title">
                            <span>English</span>
                        </div>
                        <div class="skillBar-bar" style="width:90%"></div>
                        <div class="skill-bar-percent">90%</div>
                    </div>
                </div>
                <div class="skill">
                    <div class="skillBar clearfix" data-percent="80%">
                        <div class="skillBar-title">
                            <span>French</span>
                        </div>
                        <div class="skillBar-bar" style="width:80%"></div>
                        <div class="skill-bar-percent">80%</div>
                    </div>
                </div>
                <div class="skill">
                    <div class="skillBar clearfix" data-percent="50%">
                        <div class="skillBar-title">
                            <span>Spanish</span>
                        </div>
                        <div class="skillBar-bar" style="width:50%"></div>
                        <div class="skill-bar-percent">50%</div>
                    </div>
                </div>

                <div class="skill">
                    <div class="skillBar clearfix" data-percent="60%">
                        <div class="skillBar-title">
                            <span>Swiss</span>
                        </div>
                        <div class="skillBar-bar" style="width:60%"></div>
                        <div class="skill-bar-percent">60%</div>
                    </div>
                </div>

                <div class="title_content">
                    <div class="text_content">MY RESUME</div>
                    <div class="clear"></div>
                </div>
                <a class="download" href="#">
                    <span  data-hover="DOWNLOAD MY RESUME"><i class="glyphicon glyphicon-download-alt"></i>Download My Resume</span>
                </a>
            </div>
            <div class="col-md-6">
                <div class="title_content">
                    <div class="text_content">EXPERIENCe</div>
                    <div class="clear"></div>
                </div>
                <ul class="experience">
                    <li ng-repeat="item  in $ctrl.data.experience">
                        <h5>{{item.title}}<span><i class="fa fa-calendar color"></i>{{item.time}}</span></h5>
                        <h6><i class="fa fa-briefcase"></i> Name of Company</h6>
                        <p>{{item.content}}</p>
                    </li>
                </ul>
                <div class="title_content">
                    <div class="text_content">EDUCATION</div>
                    <div class="clear"></div>
                </div>
                <ul class="experience">
                    <li ng-repeat="item  in $ctrl.data.education">
                        <h5>{{item.title}}<span><i class="fa fa-calendar color"></i>{{item.time}}</span></h5>
                        <h6><i class="fa fa-book"></i> Name of University</h6>
                        <p>{{item.content}}</p>
                    </li>
                </ul>
                <div class="title_content">
                    <div class="text_content">AWARDS</div>
                    <div class="clear"></div>
                </div>
                <ul class="experience">
                    <li ng-repeat="item  in $ctrl.data.awards">
                        <h5>{{item.title}}<span><i class="fa fa-calendar color"></i> {{item.time}}</span></h5>
                        <h6><i class="fa fa-trophy"></i> Name of Institute</h6>
                        <p>{{item.content}}</p>
                    </li>
                </ul>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div>
                    <div class="title_content">
                        <div class="text_content">CLIENT REFERENCE</div>
                        <div class="clear"></div>
                    </div>
                    <ul class="reference">
                        <li class="clearfix " ng-repeat="item in $ctrl.data.reference">
                            <img class="img_reference img-circle" src="http://placehold.it/100x100">
                            <p>{{item.content}}</p>
                            <span>{{item.person}}</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <h2 class="resp-accordion hi-icon-wrap hi-icon-effect-5 hi-icon-effect-5a" role="tab" aria-controls="tab_item-0" ui-sref="main.portfolio">
        <i class="hi-icon fa fa-briefcase icon_menu icon_menu_active"></i>
        <span class="tite-list-resp">  PORTFOLIO</span>
        <i class="glyphicon glyphicon-chevron-down arrow-tabs"></i>
    </h2>
    <h2 class="resp-accordion hi-icon-wrap hi-icon-effect-5 hi-icon-effect-5a" role="tab" aria-controls="tab_item-0" ui-sref="main.blog">
        <i class="hi-icon fa fa-bullhorn icon_menu icon_menu_active"></i>
        <span class="tite-list-resp"> blog</span>
        <i class="glyphicon glyphicon-chevron-down arrow-tabs"></i>
    </h2>
    <h2 class="resp-accordion hi-icon-wrap hi-icon-effect-5 hi-icon-effect-5a" role="tab" aria-controls="tab_item-0" ui-sref="main.contact">
        <i class="hi-icon fa fa-envelope icon_menu"></i>
        <span class="tite-list-resp"> contact </span>
        <i class="glyphicon glyphicon-chevron-down arrow-tabs"></i>
    </h2>
</div>